<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #menu {
            width: 300px;
        }
        
        .has_children {
            background: #555;
            color: #fff;
            cursor: pointer;
        }
        
        .highlight {
            color: red;
            background: green;
        }
        
        div {
            padding: 0;
        }
        
        div a {
            background: #888;
            display: none;
            float: left;
            width: 300px;
        }
    </style>
    <!-- 引入 jQuery -->
    <script src="./jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        /**
        					第一种方式：
        					
        					$(function()
        						{
        							$("#menu").find(".has_children").click(function()
        												{
        													//	1、得到当前点击的这个div
        													var has_childrenNode = $(this);
        													
        													//	2、为当前的这个div添加样式,并且找到当前的这个div下面所有的a元素标签,并show()显示出来
        													has_childrenNode.addClass("highlight")		
        																	.find("a")
        																	.show();
        													
        													//	3、把当前点击的这个div的所有的兄弟元素(其实就是其他class为has_children的div)下面所有的a元素给隐藏			
        													has_childrenNode.siblings().removeClass("highlight").children("a").hide();																			
        												});
        						});
        				 **/

        /**
	 	第二种方式：
	
	 
	 **/

        $(function() {
            $("#menu").find(".has_children").click(function() {
                //	1、得到当前点击的这个div
                var has_childrenNode = $(this);

                //	2、通过end()方法来去得到div元素
                var currentDivNode = has_childrenNode.addClass("highlight")
                    .find("a").show()
                    .end(); //在调用end()方法之前,操作的其实是a标签元素让它显示出来,对象其实就是a标签
                //对象.当调用了end()方法之后,那么就会返回最近操作的一次状态，
                //这个状态其实就是查找a元素时的状态,【返回的对象其实就正是has_childrenNode】.

                //	3、隐藏该兄弟的div	下面的a标签元素					
                currentDivNode.siblings().removeClass("highlight")
                    .find("a").hide();

            });
        });
    </script>
</head>

<body>
    <div id="menu">
        <div class="has_children">
            <span>第1章-认识jQuery</span>
            <a>1.1-JavaScript和JavaScript库</a>
            <a>1.2-加入jQuery</a>
            <a>1.3-编写简单jQuery代码</a>
            <a>1.4-jQuery对象和DOM对象</a>
            <a>1.5-解决jQuery和其它库的冲突</a>
            <a>1.6-jQuery开发工具和插件</a>
            <a>1.7-小结</a>
        </div>
        <div class="has_children">
            <span>第2章-jQuery选择器</span>
            <a>2.1-jQuery选择器是什么</a>
            <a>2.2-jQuery选择器的优势</a>
            <a>2.3-jQuery选择器</a>
            <a>2.4-应用jQuery改写示例</a>
            <a>2.5-选择器中的一些注意事项</a>
            <a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
            <a>2.7-还有其它选择器么？</a>
            <a>2.8-小结</a>
        </div>
        <div class="has_children">
            <span>第3章-jQuery中的DOM操作</span>
            <a>3.1-DOM操作的分类</a>
            <a>3.2-jQuery中的DOM操作</a>
            <a>3.3-案例研究——某网站超链接和图片提示效果</a>
            <a>3.4-小结</a>
        </div>
    </div>
</body>

</html>